<template>
	<view>
		<view class="top">
			<!--  -->
		</view>

		<view class="cover">
			<image src="@/static/yhyg_parter2.png" style="width: 95%; height: 370rpx; margin: 20rpx 23rpx;"></image>

			<view class="card1">
				<view style="font-size: 46rpx; font-weight: 500;margin-bottom: 10rpx;">{{xichedemo.shopName}}</view>
				<view class="rate">
					<u-rate style="margin-right:14rpx ;" active-color="#ffc100" gutter="0"
						v-model="xichedemo.star"></u-rate>
					{{xichedemo.star}}分
					<span style="margin-left: 35rpx;">销量：{{xichedemo.sales}}</span>
				</view>
				<view style="font-size:32rpx ; margin-bottom: 10rpx;">
					营业时间：{{xichedemo.startTime}}---{{xichedemo.endTime}}</view>
				<view style="display: flex;font-size:32rpx ; padding-right: 30rpx;">位置：{{xichedemo.shopAddress}}
					<u-icon name="map" color="#2979ff" size="24" style="margin-left: 18rpx;"></u-icon>
				</view>
			</view>
		</view>

		<view class="middle">
			<view class="card2">
				<view style="margin-bottom: 30rpx;font-size: 46rpx;font-weight: 500;">服务项目</view>



				<view>
					<form @submit.prevent="submitForm">
						<view v-for="(service, index) in servicelist" :key="service.id">
							<label>
								<radio :value="service.id" :checked="selectedServiceId === service.id"
									@change="radioChange(service.id)" />{{ service.name}}
							</label>
						</view>
						<button form-type="submit">Submit</button>
					</form>
				</view>





				<view style="margin-top: 14rpx;">
					<span style="font-size: 52rpx; color:#ff3e01 ;margin-right: 20rpx;">￥35.9 </span><span
						style="color:#858585 ;"><del>￥68.9</del></span>
					<view style="font-size: 32rpx; margin-top: 10rpx;">{{xichedemo.shopIntro}}</view>
				</view>
			</view>

			<view class="card3">
				<view style="margin-bottom: 30rpx;font-size: 46rpx;font-weight: 500;">服务评价</view>
				<view v-for="(item,index) in pingjialist" :index="index" :key="index" class="user">
					<view class="left"><u-avatar :src="item.isImgChanged" size="70"></u-avatar></view>
					<view class="right">
						<view style="display: flex; margin-top: 20rpx; margin-bottom: 10rpx;"><u--text mode="name"
								text="item.userId" format="encrypt"></u--text>
							<view>{{item.commentTime}}</view>
						</view>
						<view style="padding: 4rpx 1rpx;"><u-rate style="margin-right:14rpx ;" active-color="#ffc100"
								gutter="0" v-model="item.star"></u-rate></view>
						<view>{{item.comments}}</view>
					</view>

				</view>






			</view>

		</view>


		<u-tabbar :fixed="false" :placeholder="false" :safeAreaInsetBottom="false">
			<u-tabbar-item text="联系客服" icon="kefu-ermai"></u-tabbar-item>
			<u-button text="立即下单" style="margin-top:10rpx;margin-right:30rpx; width: 480rpx;"
				color="linear-gradient(to right, rgb(135, 206, 235), rgb(0, 0, 205))"></u-button>

		</u-tabbar>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 选中的服务ID
				selectedServiceId: null,
				pingjialist: '',

				evaluate: {
					shopId: ''
				},


				servicelist: '',

				xichedemo: '',
				id: '',
				rate: 3,
				userimg: '/static/545513be-81f9-a452-608e-dcee2e45b8c8.png',
				userrate: 5
			}
		},

		onLoad(options) {
			let that = this
			const id = options.id;
			console.log('Received ID:', id);
			that.id = id
			that.evaluate.shopId = id
			this.getxicheshopdemo()

			this.getservicelist()
			this.getpingjia()
		},

		methods: {



			radioChange(serviceId) {
				this.selectedServiceId = serviceId;
			},
			submitForm() {
				// 在这里处理表单提交，例如发送选中的服务ID到服务器
				console.log('Selected Service ID:', this.selectedServiceId);
				// 你也可以找到完整的服务对象
				const selectedService = this.servicelist.find(service => service.id === this.selectedServiceId);
				console.log('Selected Service:', selectedService);
			},


			getpingjia() {
				let that = this
				this.$http({
					url: "api/order/evaluate/list/shopId",
					method: "get",
					data: that.evaluate,
					success(res) {
						console.log("评价=============")
						console.log(res)
						that.pingjialist = res.data.rows
					}



				})

			},


			getservicelist() {

				let that = this
				this.$http({
					url: "api/service/service/selectListByShopId/" + that.id,
					method: "get",
					success(res) {
						console.log("服务===================")
						console.log(res)
						that.servicelist = res.data
						console.log(res.data)
						console.log()
					}
				})
			},




			getxicheshopdemo() {
				let that = this
				this.$http({

					url: "api/shop/shop/" + that.id,
					method: "get",
					success(res) {
						that.xichedemo = res.data.data
						console.log("xiangxi================")
						console.log(res.data)
					}


				})





			},




			getMyPosition() {
				let that = this
				uni.getLocation({
					success(res) {
						// console.log("定位==========")
						// console.log(res)
						that.latitude = res.latitude
						that.longitude = res.longitude
						that.markers[0].latitude = res.latitude
						that.markers[0].longitude = res.longitude

						console.log("当地的经纬度")
						console.log(res.latitude)
						console.log(res.longitude)


					},
					fail() {
						alert("定位失败")
					}
				})



			},




		}
	}
</script>

<style lang="scss">
	// 用户评价部分的通用样式
	.user {
		margin: 24rpx 0rpx;
		border-radius: 15rpx; // 设置圆角，让边角更顺滑
		box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1); // 添加阴影，营造微微突起效果
		display: flex;
		overflow: hidden; // 防止子元素超出边界影响悬浮放大效果展示
		transition: all 0.2s ease; // 添加过渡效果，用于悬浮放大时的动画过渡

		&:hover {
			transform: scale(1.05); // 悬浮时放大1.05倍，实现悬浮放大效果
		}

		.left {
			padding: 25rpx 25rpx;
			width: 30%;
		}

		.right {
			width: 70%;
			font-size: 24rpx;
		}
	}

	.middle {
		width: 90%;
		position: relative;
		top: -140rpx;
	}

	// 服务项目卡片样式
	.card2 {
		border-radius: 10rpx;
		box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
		padding: 15rpx 15rpx;
		padding-bottom: 30rpx;
		width: 97%;

		margin-left: 30rpx;
		transition: all 0.2s ease;

		&:hover {
			transform: scale(1.05);
		}
	}

	// 服务评价卡片样式
	.card3 {
		margin-top: 40rpx;
		border-radius: 10rpx;
		box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
		padding: 5rpx 15rpx;
		width: 97%;
		margin-left: 30rpx;
		transition: all 0.2s ease;

		&:hover {
			transform: scale(1.05);
		}
	}

	.top {
		width: 100%;
		height: 270rpx;
		background-color: #2f81fa;
	}

	.cover {
		border-radius: 10rpx;
		box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
		background-color: #fff;
		width: 90%;
		height: 660rpx;
		position: relative;
		top: -190rpx;
		left: 37rpx;
	}

	.rate {
		font-size: 26rpx;
		margin-bottom: 10rpx;
	}

	.card1 {
		border-radius: 10rpx;

		padding: 5rpx 15rpx;

		.rate {
			display: flex;

		}

		transition: all 0.2s ease;

		&:hover {
			transform: scale(1.05);
		}
	}
</style>